import React from 'react';
import { Card, Typography, Row, Col, Statistic } from 'antd';
import { UserOutlined, FileTextOutlined, DollarOutlined, ArrowUpOutlined } from '@ant-design/icons';

const { Title, Paragraph } = Typography;

const Home = () => {
  return (
    <div>
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <Card variant="filled" style={{ marginBottom: 16 }}>
            <Title level={2}>欢迎使用管理后台</Title>
            <Paragraph>这里是系统的主控中心，您可以管理用户、物品和系统设置。</Paragraph>
          </Card>
        </Col>

        <Col xs={24} sm={12} md={6}>
          <Card variant="filled" style={{ height: '100%' }}>
            <Statistic
              title="用户总数"
              value={1280}
              icon={<UserOutlined />}
              style={{ color: '#1890ff' }}
            />
          </Card>
        </Col>

        <Col xs={24} sm={12} md={6}>
          <Card variant="filled" style={{ height: '100%' }}>
            <Statistic
              title="物品总数"
              value={8642}
              icon={<FileTextOutlined />}
              style={{ color: '#52c41a' }}
            />
          </Card>
        </Col>

        <Col xs={24} sm={12} md={6}>
          <Card variant="filled" style={{ height: '100%' }}>
            <Statistic
              title="今日销售额"
              value={12680}
              prefix={<DollarOutlined />}
              style={{ color: '#faad14' }}
            />
          </Card>
        </Col>

        <Col xs={24} sm={12} md={6}>
          <Card variant="filled" style={{ height: '100%' }}>
            <Statistic
              title="增长率"
              value={16}
              suffix="%"
              icon={<ArrowUpOutlined />}
              style={{ color: '#eb2f96' }}
            />
          </Card>
        </Col>

        <Col span={24}>
          <Card title="最近活动" variant="filled">
            <Paragraph>这里将显示系统的最近活动和通知。</Paragraph>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Home;